<script lang="ts" setup>
import {ref} from "vue"
import {SETTOKEN, SETUSERINFO} from "../router"
import {ElMessage} from "element-plus"
import {userLogin, userRegister} from "../serve"
import {useRouter} from 'vue-router'

const
    fromRules = {
      username: [
        {
          required: true,
          min: 5,
          max: 10,
          message: '账号长度5-10位',
          trigger: 'trigger',
        },
      ],
      password: [
        {
          required: true,
          min: 5,
          max: 15,
          message: '密码长度5-15位',
          trigger: 'trigger',
        },
      ]
    },
    fromData = ref({username: '', password: '', confirmPassword: ''}),
    signUp = ref(false),
    froms = ref(),
    listLoading = ref(false),
    router = useRouter()
;

async function changeLogin() {
  try {
    await froms.value.validate()
    if (signUp.value) { //注册
      if (fromData.value.password != fromData.value.confirmPassword) {
        ElMessage({message: '密码不一致', type: 'error'})
        return
      }
      userRegister({...{role: 'ADMIN'}, ...fromData.value}).then(()=>{
        ElMessage({message: '注册成功！', type: 'success'})
        setTimeout(() => {
          listLoading.value = true
          setTimeout(() => {
            listLoading.value = false
            signUp.value = false
            fromData.value = {username: '', password: '', confirmPassword: ''}
          }, 1500)
        }, 600)
      })
    } else { // 登录
      userLogin({username: fromData.value['username'], password: fromData.value['password']}).then((r: any) => {
        SETUSERINFO(r)
        SETTOKEN(r['token'])
        sessionStorage.setItem('userName',fromData.value.username)
        router.push('/info').catch(() => true)
      })
    }
  } catch (e) {
  }
}

function changeSw() {
  signUp.value = !signUp.value
  fromData.value = {username: '', password: '', confirmPassword: ''}
}
</script>

<template>
  <div layout>
    <el-image leftImg src="/login_bg.png"/>
    <div rightFrom>
      <el-form ref="froms" v-loading="listLoading" :model="fromData" :rules="fromRules" el-From
               element-loading-text="加载中...">
        <h2>欢迎{{ signUp ? '注册' : '登录' }}鲜花销售系统</h2>
        <el-form-item prop="username">
          <el-input v-model="fromData['username']" :placeholder="signUp?'请输入注册账号':'请输入账号'" size="large"/>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="fromData['password']" placeholder="请输入密码" show-password size="large" type="password"/>
        </el-form-item>
        <el-form-item v-if="signUp" prop="password">
          <el-input v-model="fromData['confirmPassword']" placeholder="请再次输入密码" show-password size="large"
                    type="password"/>
        </el-form-item>
        <el-form-item>
          <div :style="{color:signUp?'#8B4419':'#CCA689'}" sw @click="changeSw"
               v-text="signUp?'点击登录':'点击注册'"/>
        </el-form-item>
        <el-form-item>
          <el-button round size="large" style="width: 100%" type="success" @click="changeLogin">
            立即{{ signUp ? '注册' : '登录' }}
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
[layout] {
  user-select: none;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: flex-start;
}

[leftImg] {
  flex: 1;
  background-repeat: no-repeat;
  background-size: cover;
}

[rightFrom] {
  flex: 1;
  background: linear-gradient(to right, white, #CCA689);
  display: flex;
  justify-content: center;
  align-items: center;
}

[el-From] {
  background-color: white;
  width: 50%;
  box-shadow: 1px 1px 8px grey;
  padding: 40px;
  border-radius: 15px;

  h2 {
    text-align: center;
    margin-bottom: 15px;
  }

  [sw] {
    text-decoration: underline;
    margin-left: 5px;
    cursor: pointer;
    font-size: 16px;
  }
}
</style>